<template>
	<view>
		<view class="top">
			<view class="header">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="header-title">选择车辆</view>
				<view class="placeholder"></view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="carlist">
				<van-radio-group v-model="radio">
					<view 
						v-for="(car, index) in carList" 
						:key="index"
						class="caritem"
						:class="{ 'selected': radio === car.id }"
						@click="selectCar(car.id)"
					>
						<view class="carimage">
							<image :src="car.image" mode="aspectFill"></image>
						</view>
						<view class="carinfo">
							<view class="carmodels">
								车型：{{car.brand}}{{car.model}}
							</view>
							<view class="carlicense">
								车牌：{{car.plateNumber}}
							</view>
						</view>
						<view class="choose">
							<van-radio :name="car.id"/>
						</view>
					</view>
				</van-radio-group>
			</view>
			
			<!-- 确认选择按钮 -->
			<view class="confirm-btn" @click="confirmSelection">
				确认选择
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: '1',
				carList: [
					{
						id: '1',
						brand: '奔驰',
						model: 'E300',
						plateNumber: '京A·12345',
						image: '/static/奔驰e300.jpeg'
					},
					{
						id: '2',
						brand: '奔驰',
						model: 'E300',
						plateNumber: '粤B·AB888',
						image: '/static/奔驰e300.jpeg'
					},
					{
						id: '3',
						brand: '宝马',
						model: 'X5',
						plateNumber: '沪C·88888',
						image: '/static/奔驰e300.jpeg'
					},
					{
						id: '4',
						brand: '奥迪',
						model: 'A6L',
						plateNumber: '苏A·66666',
						image: '/static/奔驰e300.jpeg'
					}
				]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 选择车辆
			selectCar(carId) {
				this.radio = carId;
			},
			
			// 确认选择
			confirmSelection() {
				const selectedCar = this.carList.find(car => car.id === this.radio);
				if (selectedCar) {
					// 将选择的车辆信息存储到本地存储
					uni.setStorageSync('selectedVehicle', {
						brand: selectedCar.brand,
						model: selectedCar.model,
						plateNumber: selectedCar.plateNumber
					});
					
					// 返回上一页
					uni.navigateBack();
					
					// 显示选择成功提示
					uni.showToast({
						title: '车辆选择成功',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.top{
		height: 20vh;
		background-color: #1f73f1;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 20rpx 30rpx;
		height: 100%;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	
	.back-icon {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.header-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	.bottom{
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 80vh;
		padding-bottom: 120rpx;
	}

	.carimage{
		width: 180rpx;
		height: 180rpx;
	}
	.carimage image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;
	}
	.caritem{
		display: flex;
		align-items: center;
		background-color: #ffffff;
		height: 200rpx;
		padding: 40rpx;
		border-radius: 30rpx;
		transform: translateY(-250rpx);
		margin-bottom: 40rpx;
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
	}
	
	.caritem.selected {
		border-color: #1f73f1;
		box-shadow: 0 4rpx 20rpx rgba(31, 115, 241, 0.2);
		transform: translateY(-250rpx) scale(1.02);
	}
	.carmodels{
		font-size: 35rpx;
		margin-bottom: 40rpx;
	}
	.carlicense{
		font-size: 30rpx;
	}
	.carinfo{
		margin-left: 20rpx;
	}
	.choose{
		margin-left: 20rpx;
	}
	
	/* 确认选择按钮 */
	.confirm-btn {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		background: linear-gradient(135deg, #1f73f1 0%, #4285f4 100%);
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(31, 115, 241, 0.3);
		transition: all 0.3s ease;
	}
	
	.confirm-btn:active {
		background: linear-gradient(135deg, #1a5cc7 0%, #3367d6 100%);
		transform: scale(0.98);
		box-shadow: 0 2rpx 12rpx rgba(31, 115, 241, 0.4);
	}
</style>
